<template>
    <div class="drawerContainer">
        <el-form :model="propJson" label-width="auto" style="width: 100%">

            <el-divider>文件名称</el-divider>

            <CommonThirdServiceValue :actionInfo="propJson.fileNameInfo ? propJson.fileNameInfo : {}" :commonParam="commonParam" />

            <el-divider>文件下载行为</el-divider>

            <div style="display: flex; justify-content: center; align-items: center; margin-top: 3%;">
                <el-button type="primary" class="addCollapse" size="small" @click="addClickAction()">添加点击行为</el-button>
            </div>

            <CommonThirdServiceAction :actionList="propJson.fileClickDownloadAction" :commonParam="commonParam"/>
        </el-form>
    </div>
</template>

<script setup lang="ts" name="FileViewDrawer">
import {computed, defineProps} from "vue";
import {useLowCodeStore} from "@/stores/lowcode/lowcode.ts";
import CommonThirdServiceValue from "@/components/lowcode/service/CommonThirdServiceValue.vue";
import CommonThirdServiceAction from "@/components/lowcode/service/CommonThirdServiceAction.vue";

let props = defineProps(['commonParam']);

let commonParam = computed(() => {return props['commonParam']})

let propJson = computed(() => {return useLowCodeStore().lowCodeDrawerJsonInfo});

function addClickAction() {
    if (!propJson.value.fileClickDownloadAction) {
        propJson.value.fileClickDownloadAction = []
    }
    let variableInfo = {variableName: "", variableValue: "", type: "variable", variableType: "String", variableParamName: "", apiMethod: "GET", responseType: "default", apiType: "MSOA", apiPath: "",
        isAddBeforeThirdExec: false, beforeThirdExecCode: "", beforeExecParamJson: [], isAddAfterThirdExec: false, afterThirdExecCode: "", afterExecParamJson: []}
    propJson.value.fileClickDownloadAction.push(variableInfo)
}
</script>

<style scoped lang="less">

</style>